<template>
  <el-dialog
    v-model="dialogVisible"
    :title="modalTitle"
    width="1000px"
    :close-on-click-modal="false"
  >
    <div class="review-content">
      <!-- 左侧预览区域 -->
      <div class="preview-section">
        <div class="media-container">
          <img 
            v-if="currentImage?.type === 'image'"
            :src="currentImage?.url" 
            alt="预览图片"
            class="preview-media"
          />
          <video 
            v-else-if="currentImage?.type === 'video'"
            :src="currentImage?.url"
            class="preview-media"
            controls
            muted
            preload="metadata"
            :poster="getVideoPoster(currentImage?.url)"
          >
            您的浏览器不支持视频播放
          </video>
          <div v-else class="no-media">
            <Icon icon="ep:picture" class="no-media-icon" />
            <div class="no-media-text">暂无内容</div>
          </div>
        </div>
      </div>

      <!-- 右侧审批区域 -->
      <div class="review-section">
        <div class="review-header">
          <span class="review-title">审批</span>
        </div>
        
        <div class="review-buttons">
          <el-button 
            type="danger" 
            size="large"
            @click="handleReview('rejected')"
            :loading="submitting"
            :disabled="!canReview"
          >
            不通过
          </el-button>
          <el-button 
            type="primary" 
            size="large"
            @click="handleReview('approved')"
            :loading="submitting"
            :disabled="!canReview"
          >
            通过
          </el-button>
        </div>

        <!-- 只读提示 -->
        <div v-if="!canReview" class="readonly-notice">
          <Icon icon="ep:info" class="readonly-icon" />
          <span>此步骤已完成，仅可查看不可审核</span>
        </div>

        <div v-if="canReview" class="review-comment">
          <div class="comment-label">
            请输入审核建议（不通过为必填项，通过则不强制必填）
          </div>
          <el-input
            v-model="reviewComment"
            type="textarea"
            :rows="6"
            placeholder="请输入审核意见..."
            class="comment-input"
          />
        </div>

        <!-- 显示之前的审核意见（如果有） -->
        <div v-if="currentImage?.comment" class="previous-review">
          <div class="previous-review-label">上次审核意见：</div>
          <div class="previous-review-content">
            {{ currentImage.comment }}
          </div>
          <div v-if="currentImage.reviewTime" class="previous-review-time">
            审核时间：{{ currentImage.reviewTime }}
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import * as RefundActivityRecordApi from '@/api/mall/promotion/refund/activityRecord'
import type { CheckInImageVO, ReviewRequestVO } from '@/api/mall/promotion/refund/activityRecord'

defineOptions({ name: 'ReviewModal' })

const emit = defineEmits(['refresh'])
const message = useMessage()

const dialogVisible = ref(false)
const submitting = ref(false)
const currentImage = ref<CheckInImageVO>()
const reviewComment = ref('')
const canReview = ref(true)

/** 模态框标题 */
const modalTitle = computed(() => {
  if (!currentImage.value) return '审核'
  
  const statusText = currentImage.value.status === 'approved' 
    ? '审核已通过的' 
    : currentImage.value.status === 'rejected'
    ? '审核未通过的'
    : '待审核的'
    
  const mediaType = currentImage.value.type === 'video' ? '视频' : '图片'
  
  return `${statusText}${mediaType}`
})

/** 获取视频封面图 */
const getVideoPoster = (url?: string) => {
  // 如果有视频封面图的话可以在这里设置
  // 目前返回空字符串，让浏览器自动生成封面
  return ''
}

/** 打开弹窗 */
const open = (image: CheckInImageVO, canReviewParam: boolean = true) => {
  currentImage.value = image
  reviewComment.value = '' // 清空输入框，让用户重新输入
  canReview.value = canReviewParam
  dialogVisible.value = true
}

/** 处理审核 */
const handleReview = async (status: 'approved' | 'rejected') => {
  // 如果是拒绝，必须填写审核意见
  if (status === 'rejected' && !reviewComment.value.trim()) {
    message.warning('请填写审核意见')
    return
  }

  try {
    submitting.value = true
    
    const reviewData: ReviewRequestVO = {
      id: currentImage.value!.id, // 使用id而不是punchId
      checkStatus: status === 'approved' ? 1 : 2, // 1-审核通过 2-审核不通过
      advice: reviewComment.value.trim() || undefined
    }
    
    console.log('开始审核，参数:', reviewData)
    console.log('当前图片信息:', currentImage.value)
    
    const result = await RefundActivityRecordApi.reviewCheckInImage(reviewData)
    
    console.log('审核结果:', result)
    
    message.success(`审核${status === 'approved' ? '通过' : '未通过'}`)
    emit('refresh')
    dialogVisible.value = false
  } catch (error) {
    console.error('审核失败:', error)
    message.error('审核失败，请重试')
  } finally {
    submitting.value = false
  }
}

defineExpose({
  open
})
</script>

<style scoped>
.review-content {
  display: flex;
  gap: 30px;
  min-height: 500px;
}

.preview-section {
  flex: 2;
}

.media-container {
  width: 100%;
  height: 500px;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
}

.preview-media {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.preview-media:focus {
  outline: 2px solid #409eff;
  outline-offset: 2px;
}

.no-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #c0c4cc;
}

.no-media-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.no-media-text {
  font-size: 16px;
}

.review-section {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.review-header {
  margin-bottom: 20px;
}

.review-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.review-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
}

.review-buttons .el-button {
  flex: 1;
  height: 48px;
}

.readonly-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #f0f9ff;
  border: 1px solid #e1f5fe;
  border-radius: 6px;
  color: #0277bd;
  font-size: 14px;
  margin-bottom: 20px;
}

.readonly-icon {
  font-size: 16px;
  color: #0288d1;
}

.review-comment {
  margin-bottom: 20px;
}

.comment-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 10px;
  line-height: 1.5;
}

.comment-input {
  width: 100%;
}

.previous-review {
  padding: 16px;
  background-color: #f5f7fa;
  border-radius: 6px;
  border-left: 4px solid #409eff;
}

.previous-review-label {
  font-size: 14px;
  font-weight: 500;
  color: #606266;
  margin-bottom: 8px;
}

.previous-review-content {
  font-size: 14px;
  color: #303133;
  line-height: 1.6;
  margin-bottom: 8px;
}

.previous-review-time {
  font-size: 12px;
  color: #909399;
}
</style> 
